<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        #hearts-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .heart {
            position: absolute;
            opacity: 0;
            animation: float 8s ease-in-out infinite, pulse 2s ease-in-out infinite;
        }
        
        @keyframes float {
            0% {
                transform: translateY(100vh) scale(0.5);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translateY(-100px) scale(1);
                opacity: 0;
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.7));
            }
            50% {
                filter: drop-shadow(0 0 20px rgba(255, 105, 180, 1));
            }
        }
        
        #text-container {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        #love-text {
            font-size: 5rem;
            font-weight: bold;
            color: #87CEFA; /* 浅蓝色 */
            text-shadow: 0 0 10px rgba(135, 206, 250, 0.8);
            animation: textPulse 3s ease-in-out infinite;
        }
        
        @keyframes textPulse {
            0%, 100% {
                transform: scale(1);
                text-shadow: 0 0 10px rgba(135, 206, 250, 0.8);
            }
            50% {
                transform: scale(1.1);
                text-shadow: 0 0 30px rgba(135, 206, 250, 1);
            }
        }
    </style>
</head>
<body>
    <div id="hearts-container"></div>
    <div id="text-container">
        <div id="love-text">I LOVE U</div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heartsContainer = document.getElementById('hearts-container');
            const colors = [
                '#ff9ff3', '#fea7dc', '#ffc8dd', '#ffb6c1', '#ff69b4', 
                '#f78fb3', '#f8a5c2', '#ff9ff3', '#fea7dc', '#f78fb3'
            ];
            
            // 创建爱心SVG
            function createHeartSVG(color) {
                const size = Math.random() * 30 + 20; // 大小在20-50之间随机
                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                svg.setAttribute("width", size);
                svg.setAttribute("height", size);
                svg.setAttribute("viewBox", "0 0 24 24");
                svg.style.fill = color;
                
                const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
                path.setAttribute("d", "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z");
                
                svg.appendChild(path);
                return svg;
            }
            
            // 创建爱心元素
            function createHeart() {
                const heart = document.createElement('div');
                heart.className = 'heart';
                
                // 随机位置、大小、持续时间和延迟
                const left = Math.random() * 100;
                const delay = Math.random() * 5;
                const duration = 5 + Math.random() * 10;
                const scale = 0.5 + Math.random() * 1;
                const color = colors[Math.floor(Math.random() * colors.length)];
                
                heart.style.left = `${left}%`;
                heart.style.animationDuration = `${duration}s`;
                heart.style.animationDelay = `${delay}s`;
                heart.style.transform = `scale(${scale})`;
                
                const heartSVG = createHeartSVG(color);
                heart.appendChild(heartSVG);
                
                heartsContainer.appendChild(heart);
                
                // 动画结束后移除爱心
                setTimeout(() => {
                    heart.remove();
                }, (duration + delay) * 1000);
            }
            
            // 持续创建爱心
            function startHeartAnimation() {
                // 初始创建多个爱心
                for (let i = 0; i < 20; i++) {
                    setTimeout(() => {
                        createHeart();
                    }, i * 100);
                }
                
                // 每隔一段时间创建新爱心
                setInterval(() => {
                    createHeart();
                }, 300);
            }
            
            startHeartAnimation();
        });
    </script>
</body>
</html>